﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>花卉种类列表</title>
    <script src="/Apm/js/CMSList.js" type="text/javascript"></script>
    <style>
        .list-form{
            padding:3rem;
        }
        
    </style>
</head>
<body>
    <div class="page">
        <div class="toolsbar">
            <button id="Add" class="layui-btn">
                <i class="layui-icon">&#xe654;</i> 添加
            </button>
            <button id="Edit" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe642;</i> 编辑
            </button>
            <button id="Delete" class="layui-btn layui-btn-danger">
                <i class="layui-icon">&#xe640;</i> 删除
            </button>
        </div>
        <div class="content">
            <table id="tabledata" lay-filter="datalist"></table>
        </div>
    </div>
    
</body>
</html>

<script>
    layui.use(['table', 'layer','element'], function () {
        var table = layui.table,
            layer = layui.layer,
            element = layui.element;

        BindData();
        
        //新增
        $("#Add").click(function () {
            $("#Name").val('');
            layer.open({
                type: 1,
                title: '新增',
                content: '<div class="layui-form layui-form-pane list-form"><div class="layui-form-item"><label class="layui-form-label">种类名称</label><div class="layui-input-block"><input id="Name" type="text" name="Name" required lay-verify="required" placeholder="请输入种类名称" autocomplete="off" class="layui-input"></div></div></div>',
                btn: ['确定', '关闭'],
                yes: function (index, layero) {
                    var name = $("#Name").val();
                    var json = new Object();
                    if (name == "") {
                        layer.msg('请输入种类名称');
                    }
                    else {
                        json.Name = name;
                        $.ajax({
                            url: ApiURL + 'api/Method/FlowerTypeAdd?token=' + MyPublic.getToken(),
                            type: 'post',
                            contentType: 'application/json',
                            data: JSON.stringify(json),
                            success: function (data) {
                                layer.close(index);
                                BindData();
                            },
                            error: function () {
                                layer.msg("服务器错误");
                            }
                        })
                    }
                    
                }
            });
        })
        //编辑
        $("#Edit").click(function () {
            var checkStatus = table.checkStatus('datalist'); //test即为基础参数id对应的值

            //console.log(checkStatus.data) //获取选中行的数据
            //console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            //console.log(checkStatus.isAll) //表格是否全选

            var rows= checkStatus.data.length;
            if (rows > 0) {
                if (rows == 1) {
                    var guid = checkStatus.data[0].Id;
                    var nameedit = checkStatus.data[0].Name;
                    
                    layer.open({
                        type: 1,
                        title: '编辑',
                        content: '<div class="layui-form layui-form-pane list-form"><div class="layui-form-item"><label class="layui-form-label">种类名称</label><div class="layui-input-block"><input id="Name" type="text" name="Name" required lay-verify="required" placeholder="请输入种类名称" autocomplete="off" class="layui-input"></div></div></div>',
                        success: function (layero, index) {
                            $("#Name").val(nameedit);
                        },
                        btn: ['确定', '关闭'],
                        yes: function (index, layero) {
                            var name = $("#Name").val();
                            var json = new Object();
                            if (name == "") {
                                layer.msg('请输入种类名称');
                            }
                            else {
                                json.Name = name;
                                json.Id = guid;
                                $.ajax({
                                    url: ApiURL + 'api/Method/FlowerTypeUpdate?token=' + MyPublic.getToken(),
                                    type: 'post',
                                    contentType: 'application/json',
                                    data: JSON.stringify(json),
                                    success: function (data) {
                                        layer.close(index);
                                        BindData();
                                    },
                                    error: function () {
                                        layer.msg("服务器错误");
                                    }
                                })
                            }

                        }
                    });
                }
                else {
                    layer.msg("编辑中请不要多选");
                }
            }
            else {
                layer.msg("请选中一行");
            }
            
        })
        //删除
        $("#Delete").click(function () {
            var checkStatus = table.checkStatus('datalist'); //test即为基础参数id对应的值

            var rows = checkStatus.data.length;
            if (rows > 0) {
                var guidlist = [];
                for (var i = 0; i < rows; i++) {
                    guidlist.push(checkStatus.data[i].Id);
                }
                layer.confirm('确定删除？', function (index) {
                    layer.close(index);
                    var json = new Object();
                    json.GuidList = guidlist;

                    //加载
                    var loadindex = layer.load(1); 
                    $.ajax({
                        url: ApiURL + 'api/Method/FlowerTypeDelete?token=' + MyPublic.getToken(),
                        type: 'post',
                        contentType: 'application/json',
                        data: JSON.stringify(json),
                        success: function (data) {
                            BindData();
                            layer.close(loadindex);
                        },
                        error: function () {
                            location.href = "/error.html";
                        }
                    })
                });
            }
            else {
                layer.msg("请选择你要删除的项");
            }
        })
    });
    //数据绑定
    function BindData() {
        layui.use(['table', 'layer'], function () {
            var table = layui.table,
                layer = layui.layer;

            //获取列表数据
            $.ajax({
                url: ApiURL + 'api/Method/FlowerTypeList?token=' + MyPublic.getToken(),
                type: 'post',
                contentType: 'application/json',
                success: function (data) {
                    table.render({
                        id: 'datalist',
                        elem: '#tabledata',
                        cols: [[//标题栏
                            { type: 'checkbox' },
                            { field: 'Id', title: 'ID', },
                            { field: 'Name', title: '种类' }
                            
                        ]],
                        data: data,
                        height: 'full-68',
                        limits: [10, 30, 60],
                        page: true
                    })
                },
                error: function () {
                    location.href = "/error.html";

                }
            })
        });
    }
</script>